<template>
  <div style="border-right: 1px solid #e2e2e2; height: auto">
    <el-scrollbar class="scroll" v-if="list.length > 0">
      <div class="wrapper">
        <div
          :class="{ item: true, selected: selected === i }"
          v-for="(item, i) of list"
          :key="item.id"
          @click.self="onClickHandle(i)"
        >
          {{ item.name }}
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

//const list = ref<DeviceGroupData[]>([]);
const selected = ref<number>(0);
const emit = defineEmits<{
  (e: "change", event: number): void;
}>();
const prop = defineProps(["list"]);

const onClickHandle = function (event: number) {
  selected.value = event;
  emit("change", prop.list[event]["id"] || 0);
};
</script>

<style scoped>
.scroll {
  height: calc(100vh - 61px);
}

.wrapper {
  width: 150px;
  height: auto;
  background-color: #fff;
  display: flex;
  flex-flow: column wrap;
}

.item {
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
}

.item:not(.selected):hover {
  cursor: pointer;
  background-color: #eee;
}
.header2 {
  position: sticky;
  top: 0;
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid #e7e7e7;
}
.selected {
  background: #2c3e50;
  color: #fcfcfc;
}
</style>
